<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点操作</title>
</head>
<body>
    <div id="x" class="cool feel very cool">
        我爱我的祖国
        <div>我爱我的家</div>
        <div id="y">我爱我的小孩</div>
        <div>我爱我的人民</div>
    </div>

    <form action="">
        <input type="text" name="xxx" value="11234">
        呀呀呀呀呀呀
        <button title="点我呀" type="button" id="cl">点就点</button>
    </form>
    <script>

        //比较两者的区别
        console.log(x.innerHTML);
        console.log(x.innerText);

        //通过子节点获取父节
        console.dir(y.parentElement);

        //通过当前节点获取下一个节点
        console.log(y.nextElementSibling);
        y.nextElementSibling.style.color = 'blue';

        var y1 = document.getElementById('y');
        console.log(y1);

        //通过当前节点获取前一个元素的节点
        console.log(y.previousElementSibling);
        y.previousElementSibling.style.color = 'red';

        console.dir(x);
        console.dir(x.hasChildNodes());

        console.log(x.getAttribute('class'));
        console.log(x.getAttribute('title'));   //输出null
        //添加title属性
        x.setAttribute('title','This is my title');
        console.log(x.getAttribute('title'));
        console.dir(x.title);
        //移除title
        // x.removeAttribute('title');
        console.dir(x.title);   //输出空行
        console.log(x.getAttribute('title'));   //输出'null'

        /**
         * Dom 中，节点分为文本节点和元素节点
         *  Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
         *  NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。|
         *   元素也可以拥有属性。属性是属性节点。
         *  总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。
         */
        var x1 = document.getElementById('x');
        console.log(x1);
        console.dir(x.classList);
        // console.dir(x1.classList.remove('very'));
        // console.dir(x1.classList.add('just'));
        //检查是否包含某个class
        console.dir(x.classList.contains('cool'));

        //前面知识点复习 js内置对象split
        var str = x.getAttribute('class');
        var str1 = str.split(' ');
        console.log('秀操作');
        console.log(str);
        console.log(str1);
        var newStr = '';
        for(var i in str1){
            if (str1[i] != 'cool'){
                newStr += str1[i] + ' ';
            }
        }
        x.setAttribute('class',newStr);
        console.log(newStr);

        document.getElementById('cl').onclick = function () {
            //使用value来获取表单input元素的值
            console.log(document.querySelector('input').value);
        }

        //nodeValue只针对文本节点有效，故输出为 'null'
        console.dir(document.querySelector('input').nextElementSibling.nodeValue);
    </script>
</body>
</html>